﻿<div class="demo">
    <div style="margin-left: @($"{ButtonWidth}px"); white-space: nowrap;">
        <Tooltip Placement="Placement.TopLeft" Title="@Text">
            <Button>TL</Button>
        </Tooltip>
        <Tooltip Placement="Placement.Top" Title="@Text">
            <Button>Top</Button>
        </Tooltip>
        <Tooltip Placement="Placement.TopRight" Title="@Text">
            <Button>TR</Button>
        </Tooltip>
    </div>
    <div style="width: @($"{ButtonWidth}px"); float: left;">
        <Tooltip Placement="Placement.LeftTop" Title="@Text">
            <Button>LT</Button>
        </Tooltip>
        <Tooltip Placement="Placement.Left" Title="@Text">
            <Button>Left</Button>
        </Tooltip>
        <Tooltip Placement="Placement.LeftBottom" Title="@Text">
            <Button>LB</Button>
        </Tooltip>
    </div>
    <div style="width: @($"{ButtonWidth}px"); margin-left: @($"{ButtonWidth * 4 + 24}px");">
        <Tooltip Placement="Placement.RightTop" Title="@Text">
            <Button>RT</Button>
        </Tooltip>
        <Tooltip Placement="Placement.Right" Title="@Text">
            <Button>Right</Button>
        </Tooltip>
        <Tooltip Placement="Placement.RightBottom" Title="@Text">
            <Button>RB</Button>
        </Tooltip>
    </div>
    <div style="margin-left: @($"{ButtonWidth}px"); clear: both; white-space: nowrap;">
        <Tooltip Placement="Placement.BottomLeft" Title="@Text">
            <Button>BL</Button>
        </Tooltip>
        <Tooltip Placement="Placement.Bottom" Title="@Text">
            <Button>Bottom</Button>
        </Tooltip>
        <Tooltip Placement="Placement.BottomRight" Title="@Text">
            <Button>BR</Button>
        </Tooltip>
    </div>
</div>

@code
{
    public string Text = "prompt text";
    const int ButtonWidth = 70;
}